<template>
  <div>
      <el-tree ref="tree" :data="treeData" show-checkbox node-key="id" default-expand-all :props="defaultProps"></el-tree>
      <br>
      <el-button @click="handleCheck" type="primary">获取数据</el-button>
      <el-button @click="handleReset" type="danger">重置数据</el-button>
  </div>
</template>

<script>
export default {
  data() {
      return {
          keymenu: [],
          originalData: [{
              id: 1,
              label: '一级 1',
              parentId: 0,
              children: [{
                  id: 4,
                  label: '二级 1-1',
                  parentId: 1,
                  children: [{
                      id: 9,
                      label: '三级 1-1-1',
                      parentId: 4,
                  }, {
                      id: 10,
                      label: '三级 1-1-2',
                      parentId: 4,
                  }]
              }]
          }, {
              id: 2,
              label: '一级 2',
              parentId: 0,
              children: [{
                  id: 5,
                  label: '二级 2-1',
                  parentId: 2,
              }, {
                  id: 6,
                  label: '二级 2-2',
                  parentId: 2,
              }]
          }, {
              id: 3,
              label: '一级 3',
              parentId: 0,
              children: [{
                  id: 7,
                  label: '二级 3-1',
                  parentId: 3
              }, {
                  id: 8,
                  label: '二级 3-2',
                  parentId: 3
              }]
          }],
          treeData: [{
              id: 1,
              label: '一级 1',
              parentId: 0,
              children: [{
                  id: 4,
                  label: '二级 1-1',
                  parentId: 1,
                  children: [{
                      id: 9,
                      label: '三级 1-1-1',
                      parentId: 4,
                  }, {
                      id: 10,
                      label: '三级 1-1-2',
                      parentId: 4,
                  }]
              }]
          }, {
              id: 2,
              label: '一级 2',
              parentId: 0,
              children: [{
                  id: 5,
                  label: '二级 2-1',
                  parentId: 2,
              }, {
                  id: 6,
                  label: '二级 2-2',
                  parentId: 2,
              }]
          }, {
              id: 3,
              label: '一级 3',
              parentId: 0,
              children: [{
                  id: 7,
                  label: '二级 3-1',
                  parentId: 3
              }, {
                  id: 8,
                  label: '二级 3-2',
                  parentId: 3
              }]
          }],
          defaultProps: {
              children: 'children',
              label: 'label'
          }

      };
  },
  methods: {
      handleCheck() {
          this.keymenu = this.$refs.tree.getCheckedNodes()
          console.log("getCheckedNodes", this.$refs.tree.getCheckedNodes());
          this.filterChecked(this.keymenu)
          // this.treeData = this.keymenu;
      },
      handleReset() {
          this.treeData = this.originalData;
      },
      // 过滤子组织和父组织的重复选中
      filterChecked(checked) {
          // 获得选中集合的node-key
          const indexCodeList = checked.map(function (item) {
              return item.id;
          });
          // 判断node-key是否含有parent-key
          checked.map(function (value, index) {
              if (indexCodeList.indexOf(value.parentId) !== -1) {
                  checked.splice(index, 1, 1)
              }
          });
          this.keymenu = checked.filter(function (value) {
              return value !== 1;
          });
          console.log("filterChecked", this.keymenu);
      }
  },
};
</script>

let ids = [11, 100, 200]; // 要获取的 id 列表
let treeData = [
  {
    id: 1,
    name: '1',
    children: [
      {
        id: 10,
        name: '1-1',
        children: [
          {
            id: 100,
            name: '1-1-1',
            children: []
          },
          {
            id: 101,
            name: '1-1-2',
            children: []
          }
        ]
      },
      {
        id: 11,
        name: '1-2',
        children: [
        ]
      },
      {
        id: 12,
        name: '1-3',
        children: [
          {
            id: 103,
            name: '1-3-1',
            children: []
          },
          {
            id: 104,
            name: '1-3-2',
            children: []
          }
        ]
      }
    ]
  },
  {
    id: 2,
    name: '2',
    children: [
      {
        id: 20,
        name: '2-1',
        children: [
          {
            id: 200,
            name: '2-1-1',
            children: []
          }
        ]
      },
      {
        id: 21,
        name: '2-2',
        children: []
      }
    ]
  }
];

function treeFilter (tree, func) {
  return tree.map(node => ({ ...node })).filter(node => {
    node.children = node.children && treeFilter(node.children, func)
    return func(node) || (node.children && node.children.length)
  })
}
const result = treeFilter(treeData, node => ids.includes(node.id))
console.log(result)